<template>
	<view class="update" v-if="updating">
		<view class="update-modal">
			<cmd-progress :width="120" stroke-color="#007AFF" type="circle" :percent="percent" :showInfo="false" />
			<view style="position: absolute; text-align: center;">
				<view style="font-size: 30upx;">下载中</view>
				<view style="font-size: 40upx;">{{percent}}%</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";

	export default {
		name: 'cmd-update',
		components: {
			cmdProgress
		},
		props: {
			app: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				updating: false,
				percent: 0
			}
		},
		watch: {
			app() {
				this.updateConfirm();
			}
		},
		methods: {
			updateConfirm() {
				uni.showModal({
					title: '新版本',
					content: this.app.remarks || '新版本升级',
					showCancel: !this.$updateForce,
					cancelText: '暂不升级',
					confirmText: '升级',
					success: res => {
						if (res.confirm) {
							this.updating = true;
							const downloadTask = uni.downloadFile({
								url: this.app.downloadPath,
								success: file => {
									this.updating = false;
									plus.runtime.install(file.tempFilePath);
								}
							});
							downloadTask.onProgressUpdate(pro => {
								this.percent = pro.progress;
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.update {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.update .update-modal {
		width: 300upx;
		height: 300upx;
		background-color: #ffffff;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
